import React, { useState, useEffect, useRef } from "react";
import { message } from "antd";
import { PageContainer, FooterToolbar } from "@ant-design/pro-layout";
import ProForm, {
  ProFormDigit,
  ProFormRadio,
  ProFormDependency,
  ProFormText
} from "@ant-design/pro-form";
import { fetchInfo, addOrUpdate } from "@/api/vip";
import { ProCard } from "@ant-design/pro-components";

export default () => {
  const formRef = useRef();

  const getInfo = async () => {
    const res = await fetchInfo();
    if (res.data) {
      formRef.current.setFieldsValue(res.data);
    }
  };
  useEffect(() => {
    getInfo();
  }, []);
  const handleAddOrUpdate = async (fields) => {
    const postData = {
      ...fields,
    };
    const res = await addOrUpdate(postData);
    if (res.data) {
      message.success("提交成功");
    }
  };
  return (
    <PageContainer>
      <ProCard>
        <ProForm
          labelCol={{
            span: 2,
          }}
          wrapperCol={{
            span: 6,
          }}
          layout="horizontal"
          formRef={formRef}
          submitter={{
            render: (_, dom) => <FooterToolbar>{dom[1]}</FooterToolbar>,
          }}
          onFinish={async (values) => {
            return await handleAddOrUpdate(values);
          }}
          initialValues={{
            timeLimit: 1,
          }}
        >
          <ProFormText name="id" hidden />
          <ProFormDigit
            label="金额"
            name="amount"
            placeholder="请输入金额"
            fieldProps={{
              precision: 2,
            }}
            rules={[{ required: true, message: "请输入金额" }]}
          />
          {/* <ProFormRadio.Group
            label="有效期"
            name="timeLimit"
            options={[
              {
                value: 1,
                label: "永久有效",
              },
              {
                value: 2,
                label: "自定义年限",
              },
            ]}
          />
          <ProFormDependency name={["timeLimit"]}>
            {({ timeLimit }) => {
              return (
                timeLimit === 2 && (
                  <ProFormDigit
                    label="年限"
                    name="numberOfYears"
                    placeholder="请输入年限"
                    rules={[{ required: true, message: "请输入年限" }]}
                  />
                )
              );
            }}
          </ProFormDependency> */}
        </ProForm>
      </ProCard>
    </PageContainer>
  );
};
